<template>
	<view>

		<view style="
				width: 100%;
				background: linear-gradient(180deg, #F74345, #F86769);
			">
			<view style="height: 40rpx;"></view>

			<view style="position: relative;width: 500rpx;margin-left: 20rpx;">
				<u-input placeholder="热搜:火锅" :custom-style="{'padding':'0 0 0 50rpx','borderRadius':'20rpx','backgroundColor':'#FFFFFF'}"></u-input>
				<u-icon name="search" style="color: #F74345;position: absolute;left: 10rpx;bottom:15rpx;z-index: 999;"></u-icon>
			</view>
			<view style="height: 20rpx;"></view>
			<view style="color: #FFFFFF;">
				<u-grid :col="4">
					<u-grid-item>
						<!-- start:二维码图片 -->
						<view :style="
							'transform: rotate('+deg+'deg);'+
							'margin-bottom: 15rpx;position: relative;box-sizing: border-box;border-radius: 10rpx;width: '+size+'rpx;height: '+size+'rpx;'">
							<view
								style="
									position: absolute;
									border-top: 5rpx solid #FFFFFF;
									border-left: 5rpx solid #FFFFFF;
									border-radius: 5rpx;
									width: 26rpx;
									height: 26rpx;
									box-sizing: border-box;
									"
								></view>
								
								<view
									:style="
										'position: absolute;border-top: 5rpx solid #FFFFFF;border-right: 5rpx solid #FFFFFF;border-radius: 5rpx;right: 0rpx;top:0;width: 26rpx;height: 26rpx;'
										"
									></view>
									
								<view
									style="
										position: absolute;
										border-bottom: 5rpx solid #FFFFFF;
										border-right: 5rpx solid #FFFFFF;
										border-radius: 5rpx;
										right: 0rpx;
										bottom:0;
										width: 26rpx;
										height: 26rpx;
										"
									></view>
									
								<view
									style="
										position: absolute;
										border-bottom: 5rpx solid #FFFFFF;
										border-left: 5rpx solid #FFFFFF;
										border-radius: 5rpx;
										left: 0rpx;
										bottom:0;
										width: 26rpx;
										height: 26rpx;
										"
									></view>
								
								<view style="
										position: absolute;
										width: 50rpx;
										height: 5rpx;
										top: 50%;
										left: 50%;
										transform: translate(-50%,-50%);
										background-color: #FFFFFF;
									"></view>
						</view>
						<!-- end:二维码图片 -->
						<view class="grid-text-header">扫一扫</view>
					</u-grid-item>
					<u-grid-item>
						<!-- start:会员码图片 -->
						<view :style="
						'transform: rotate('+deg+'deg);'+
							'margin-bottom: 15rpx;position: relative;box-sizing: border-box;border-radius: 10rpx;width: '+size+'rpx;height: '+size+'rpx;'">
							<view style="
											position: absolute;
											left: 0;
											top: 0;
											width: 30rpx;
											height: 30rpx;
											box-sizing: border-box;
											border: 5rpx solid #FFFFFF;
											border-radius: 5rpx;
											"></view>
							<view style="
											position: absolute;
											right: 0rpx;
											top: 0;
											box-sizing: border-box;
											width: 30rpx;
											height: 30rpx;
											border: 5rpx solid #FFFFFF;
											border-radius: 5rpx;
											"></view>
							<view style="
											position: absolute;
											left: 0rpx;
											bottom: 0;
											box-sizing: border-box;
											width: 30rpx;
											height: 30rpx;
											border: 5rpx solid #FFFFFF;
											border-radius: 5rpx;
											"></view>

							<view>
								<view style="
												position: absolute;
												background-color: #FFFFFF;
												width: 5rpx;
												height: 20rpx;
												bottom: 0;
												border-radius: 10rpx;
												left: 42rpx;"></view>
								<view style="
												position: absolute;
												background-color: #FFFFFF;
												width: 5rpx;
												height: 20rpx;
												bottom: 0;
												border-radius: 10rpx;
												left: 55rpx;"></view>
								<view style="
												position: absolute;
												background-color: #FFFFFF;
												width: 5rpx;
												height: 30rpx;
												bottom: 0;
												border-radius: 10rpx;
												left: 65rpx;"></view>
							</view>
						</view>
						<!-- end:会员码图片 -->
						<view class="grid-text-header">会员码</view>
					</u-grid-item>
					<u-grid-item @click="toNavPage('../huiyuanka/huiyuanka')">
						<!-- start:会员卡图片 -->
						<!-- 'transform: rotate('+deg+'deg);'+ -->
						<view 
						:style="
							'margin-bottom: 15rpx;position: relative;box-sizing: border-box;border-radius: 10rpx;width: '+size+'rpx;height: '+size+'rpx;'">
							<view style="
								position: absolute;
								top:0;
								background-color: #FFFFFF;
								width: 5rpx;
								height: 70rpx;
								transform: rotate(-10deg);
								"></view>

							<view style="
								position: absolute;
								top:-5rpx;
								left: 5rpx;
								background-color: #FFFFFF;
								width: 5rpx;
								height: 30rpx;
								transform: rotate(-50deg);
								"></view>

							<view style="
								position: absolute;
								top:-5rpx;
								left: 25rpx;
								background-color: #FFFFFF;
								width: 5rpx;
								height: 30rpx;
								transform: rotate(50deg);
								"></view>

							<view style="
								position: absolute;
								top:-5rpx;
								left: 45rpx;
								background-color: #FFFFFF;
								width: 5rpx;
								height: 30rpx;
								transform: rotate(-50deg);
								"></view>


							<view style="
								position: absolute;
								top:-5rpx;
								right: 5rpx;
								background-color: #FFFFFF;
								width: 5rpx;
								height: 30rpx;
								transform: rotate(50deg);
								"></view>

							<view style="
								position: absolute;
								top:0;
								right: 0;
								background-color: #FFFFFF;
								width: 5rpx;
								height: 70rpx;
								transform: rotate(10deg);
								"></view>

							<view style="
								position: absolute;
								width: 54rpx;
								height: 5rpx;
								background-color: #FFFFFF;
								bottom: 0;
								left: 9rpx;
								border-radius: 10rpx;
								"></view>

							<u-icon name="arrow-down" style="position: absolute;left: 50%;top:20rpx;transform: translateX(-50%);" />

						</view>
						<view class="grid-text-header">会员卡</view>
					</u-grid-item>
					<u-grid-item>
						<view :style="
						'transform: rotate('+deg+'deg);'+
							'margin-bottom: 15rpx;position: relative;box-sizing: border-box;border-radius: 55%;border: 5rpx solid #FFFFFF;width: '+size+'rpx;height: '+size+'rpx;'">
							<text style="font-size: 50rpx;position: absolute;left: 50%;transform: translateX(-50%);">¥</text>
						</view>
						<view class="grid-text-header">提现</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<scroll-view class=" mx-4 border align-center" style="width: 100%; white-space: nowrap" scroll-x="true" >
		<view style="width: 900rpx;">
		<u-grid :col="6">

			<u-grid-item v-for="item in list2" @click="toNavPage(item.path)">
				<image :src="item.image" style="width: 90rpx;height: 90rpx;"></image>
				<view style="height: 20rpx;"></view>
				<view class="grid-text">{{item.name}}</view>
			</u-grid-item>

		</u-grid>				
		</view>

		</scroll-view>

		<view style="width: 500rpx;margin-left: 125rpx;">
			<u-tabs 
			 :inactive-color="'#000000'"
			 :active-color="'#000000'"
			 :bg-color="{'background':'rgba(0,0,0,0)'}"
			 :bar-width="100"
			 :bar-style="{
			 	'z-index':'-1',
			 	'font-size':'20rpx',
			 	'height':'15rpx',
			 	'bottom':'8rpx',
			 	'background': 'linear-gradient(90deg,rgba(255,0,0,.7), #FEBDBE)',}" 
			 :padding="0" class="header-tab" :list="headerNavList" :is-scroll="false" 
			:current="current" @change="changeTab"></u-tabs>
		</view>
		<view style="height: 20rpx;"></view>
		<view :style="'opacity: '+(opacity/10)+';'">
			
			<view 
				v-for="item in 3"
				style="
				position: relative;
				display: inline-block;
				margin-left: 40rpx;
				border-radius: 10rpx;
				box-sizing: border-box;
				padding: 0 20rpx 0 20rpx;
				width: 300rpx;
				margin-top: 30rpx;
				box-shadow: 0 0 10rpx rgba(118,118,118,.4);">
				
				<view style="height: 20rpx;"></view>
				
				<image src="../../static/1.jpg" 
					style="
						position: absolute;
						top:0;
						left: 0rpx;
						width: 300rpx;
						height: 300rpx;
						border-radius: 10rpx 10rpx 0 0;
						"
					mode="aspectFill"
					></image>

				<view style="height: 300rpx;"></view>
				
				<view style="
					font-size: 30rpx;
					box-sizing: border-box;
					font-weight: bold;color: rgba(0,0,0,.8);">
					<text v-for="item1 in (4-item)">
					书亦烧仙草
					</text>(高新店)
					</view>
				
				<view style="height: 8rpx;"></view>
				
				<view style="
					margin: 0;font-size: 25rpx;">高新开发区热销</view>
				
				<view style="height: 8rpx;"></view>
				
				<u-rate :count="5"></u-rate>
				
				<view style="height: 8rpx;"></view>
				
				<view style="font-size: 28rpx;">
					<text style="margin-right: 10rpx;padding-right: 20rpx;border-right: 3rpx solid rgba(118,118,118,.8);">4</text>
					<text>月销 5326</text>
				</view>
				<view style="height: 20rpx;"></view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				size:40,
				opacity:0,
				deg:30,
				list2:[
					{
					image:"../../static/0.png",
					name:"超市便利",
					path:'../chaoshibianli/chaoshibianli'
				},{
					image:"../../static/1.png",
					name:"水果蔬菜",
					path:null
				},{
					image:"../../static/2.png",
					name:"美食快餐",
					path:null  
				},{
					image:"../../static/3.png",
					name:"酒店宾馆",
					path:null
				},{
					image:"../../static/4.png",
					name:"休闲玩乐",
					path:'../wanleyemian/wanleyemian'
				},{
					image:"../../static/10.png",
					name:"跑腿代购",
					path:null
				},{
					image:"../../static/5.png",
					name:"美容美发",
					path:null
				},{
					image:"../../static/6.png",
					name:"健身运动",
					path:'../yundongjianshen/yundongjianshen'
				},{
					image:"../../static/7.png",
					name:"装修建材",
					path:null
				},{
					image:"../../static/8.png",
					name:"精品礼品",
					path:null
				},{
					image:"../../static/9.png",
					name:"服装玩具",
					path:null
				},{
					image:"../../static/11.png",
					name:"服装玩具",
					path:null
				},
				],
				headerNavList: [{
						name: "关注"
					},
					{
						name: "猜你喜欢"
					},
					{
						name: "附近"
					},
					{
						name: "美食"
					}
				],
				current: 1
			}
		},
		onShow() {
			that=this;
			that.opacity=0;
			var opacityInter=setInterval(function(){
				that.opacity+=1;
				if(that.opacity>=10){
					clearInterval(opacityInter);
				} 
			},200);
			that.deg=30;
			var degInter=setInterval(function(){
				that.deg-=1;
				if(that.deg<=0){
					clearInterval(degInter);
				}
			},4);
			
			that.size=0;
			var sizeInter=setInterval(function(){
				that.size+=1;
				if(that.size>=70){
					clearInterval(sizeInter);
				}
			},1);
		},
		mounted(){
			that=this;
		},
		methods:{
			changeTab(index){
				this.current=index;
			},
			toNavPage(path){
				if(path==null||(path+"").length<5){
					that.$refs.uToast.show({
						title: "暂时未开启,与休闲玩乐页面一样",
						type: 'warning',
						duration: '2300'
					});
					return;					
				}
				uni.navigateTo({
					url:path
				})
			}
		}
		
	}
</script>

<style lang="scss">
	page {
		color: rgba(118, 118, 118, .8);
	}

	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	.box {
		box-shadow: 0 0 5px rgba(118, 118, 118, .4);
		width: 94%;
		margin-top: 10px;
		margin-left: 50%;
		border-radius: 10rpx;
		transform: translateX(-50%);
	}

	.badge-icon {
		position: absolute;
		top: 14rpx;
		right: 40rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}
	.grid-text-header {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: #FFFFFF;
}
	.page-data {
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #489fff;
		box-shadow: 0 4rpx 10rpx #489fff;
		border-radius: 20rpx;
		width: 80%;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	.header-avatar-search {
		position: fixed;
		padding-top: 100rpx;
		/* #ifdef MP-WEIXIN,APP-PLUS */
		padding-top: 110rpx;
		/* #endif */
		top: 0rpx;
		width: 100%;
		height: 85rpx;
		padding-left: 20rpx;
		z-index: 120;
		background-color: #FFFFFF;
	}


	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}


	.chlr {
		position: fixed;
		background: linear-gradient(145deg, #489fff, #3c86e6);
		color: #fff;
		width: 300rpx;
		bottom: 140rpx;
		z-index: 200;
		left: 50%;
		transform: translateX(-50%);
		font-size: 25rpx;
		border-radius: 30rpx;
		box-shadow: 0 6rpx 10rpx #3C86E6;
	}

	.chlr:active {
		background: linear-gradient(145deg, #3c86e6, #489fff);
		box-shadow: 0 0rpx 10rpx #3C86E6;
	}

	.big-news-block {
		position: fixed;
		z-index: 1000;
		width: 100%;
		background-color: rgba(255, 255, 255, .9);
		border-radius: 10rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		padding: 30rpx 20rpx 80rpx 20rpx;
	}
</style>
